{% extends "View/layout.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
     <script src='/_ah/channel/jsapi'></script>
{% endblock %}

{% block content %}

<div id="screenShots">
    {% for screenShot in screenShots %}
    <div class="screenShotItem">
        <img class="img-circle" src="/admin/screenShotView?screenShotID={{ screenShot.key.id() }}" />
        <a class="btn btn-danger caption" href="/admin/screenShotDelete?screenShotID={{ screenShot.key.id() }}" >
        <span class="glyphicon glyphicon-remove"></span>
            Delete
        </a>
    </div>
	{% endfor %}
 </div>

    <a style="margin-top: 10px;" class="btn btn-default" href="/admin/"> Zpět na index </a>


    <script type='text/javascript'>

      onOpened = function() {
          console.log('onOpened');
        //sendMessage('/opened');
      };

      onMessage = function(response) {

          console.log('onMessage payload' + response.data );

          var screenShot = JSON.parse(response.data);

          if(screenShot.type != '{{ SCREENSHOT }}') return;


          var container =  $('#screenShots');
          var screenShotItem = $('<div class="screenShotItem"></div>');

          screenShotItem.append('<img class="img-circle" src="/admin/screenShotView?screenShotID='+ screenShot.screenShotID +'" />');
          screenShotItem.append(
                            '<a class="btn btn-danger caption" href="/admin/screenShotDelete?screenShotID=' + screenShot.screenShotID  + '"><span class="glyphicon glyphicon-remove"></span> Delete</a>'
                           );
        container.append(screenShotItem);
      };

      onError = function(){
          console.log('onError');
      };

      onClose = function(){
          console.log('onClose');
      }

      sendMessage = function(path, opt_param) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', path, true);
        xhr.send();
      };

      openChannel = function() {
        var token = '{{ token }}';
        var channel = new goog.appengine.Channel(token);
        var handler = {
          'onopen': onOpened,
          'onmessage': onMessage,
          'onerror': onError,
          'onclose': onClose
        };
        var socket = channel.open(handler);
        socket.onopen = onOpened;
        socket.onmessage = onMessage;
      }

      initialize = function() {
        openChannel();
      }

      setTimeout(initialize, 100);

    </script>

{% endblock %}